<template>
  <div class="grid grid-cols-4 gap-2 max-w-sm mx-auto">
    <div
      v-for="cell in grid"
      :key="cell.id"
      :class="[
        'aspect-square border-2 rounded-lg transition-all duration-200 hover:border-primary',
        !isInteractive ? 'cursor-not-allowed' : 'cursor-pointer',
        showSequence && sequence.includes(cell.id)
          ? 'bg-blue-500 border-blue-600 text-white font-bold text-lg flex items-center justify-center'
          : cell.isSelected
            ? cell.isCorrect === true
              ? 'bg-green-500 border-green-600'
              : cell.isCorrect === false
                ? 'bg-red-500 border-red-600'
                : 'bg-gray-400 border-gray-500'
            : 'bg-muted border-border'
      ]"
      @click="isInteractive && onCellClick(cell.id)"
    >
      <span v-if="showSequence && sequence.includes(cell.id)">
        {{ sequence.indexOf(cell.id) + 1 }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    grid: {
      type: Array,
      required: true
    },
    sequence: {
      type: Array,
      required: true
    },
    showSequence: {
      type: Boolean,
      required: true
    },
    onCellClick: {
      type: Function,
      required: true
    },
    isInteractive: {
      type: Boolean,
      required: true
    }
  }
}
</script>
